<template>
    <div class="main-register-step2">
        <van-image width="100%" :src="phone2" class="img" />
        <div class="form">
            <h3>Enter the password</h3>
            <p class="tip">For the security & safety please choose a password</p>
            <van-form @submit="onNext" @failed="onFailed" :show-error-message="false">
                <van-field
                    class="password"
                    v-model="form.password"
                    name="password"
                    type="password"
                    placeholder="Password"
                    label-width="1rem"
                    :rules="[{ required: true, message: 'password is required'}, {validator: vaildpwdRule, message: 'Password format error'}]"
                >
                    <template #label>
                        <div class="input-label" @click="show = true">
                            <van-image
                                width="13px"
                                :src="lock"
                            />
                        </div>
                    </template>
                    <template #right-icon>
                        <van-icon name="eye-o" size="24px" color="#FF5E00" class="eye" />
                    </template>
                </van-field>
                <van-field
                    v-model="form.confirmPwd"
                    name="confirmPwd"
                    type="password"
                    placeholder="Confirm Password"
                    label-width="1rem"
                    :rules="[{ required: true, message: 'Confirm Password is required' }, {validator: passwordEq, message: 'Passwords does not match!'}]"
                >
                    <template #right-icon>
                        <van-icon name="eye-o" size="24px" color="#FF5E00" class="eye" />
                    </template>
                    <template #label>
                        <div class="input-label" @click="show = true">
                            <van-image
                                width="13px"
                                :src="lock"
                            />
                        </div>
                    </template>
                </van-field>
                <div style="margin: 20px 0px">
                    <van-button round block type="primary" native-type="submit"><strong>Next</strong></van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { inject, ref } from 'vue'
import phone2 from '../../assets/phone-2.png'
import lock from '../../assets/lock.png'

const {form} = defineProps({ 
    form: {
        type: Object as () => {password: string, confirmPwd: string}, //(string也可以是其他你自定义的接口)
        required: true, 
        default: {}
    } 
});

const onNext: void = inject('onNext')

const show: any = ref(0)

const onFailed: void = inject('onFailed')

const passwordEq = (pwd: string) => {
    return new Promise((resolve: any) => {
        resolve(pwd === form.password);
    })
}

//验证密码必须6及以上，并且包含数字,字母,特殊字符
const vaildpwdRule = (pwd: string) => {
    return new Promise((resolve: any) => {
        resolve(new RegExp("^(?=.{8,})(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g").test(pwd));
    })
}

</script>

<style lang="less" scoped>
.main-register-step2 {
    .img {
        transform: rotate(17.23deg)
    }
    .form {
        margin-top: 40px;
        h3 {
            font-weight: bold;
            font-size: 20px;
            line-height: 24px;
            color: #7F4E1D;
        }
        .password {
            margin-bottom: 10px;
        }
        .input-label {
            height: 28px;
            display: flex;
            align-items: center;
        }
        .tip {
            font-size: 16px;
            line-height: 19px;
            color: #7F4E1D;
            &.w8 {
                padding-bottom: 40px;
            }
        }
    }
}



</style>
